<template>
    
    <div>
        <div class="header"> 
        <div class="left">
            <div style="padding:0 100px">网易云音乐</div>
            <div :class="{active:getUrl=='/index'}" @click='go("/index")'>推荐</div>
            <div :class="{active:getUrl=='/cart'}"  @click='go("/cart?type=1")'>排行榜</div>
            <div :class="{active:getUrl=='/dizhi'}"  @click='go("/dizhi")'>歌单</div>
            <div :class="{active:getUrl=='/dingdan'}"  @click='go("/dingdan")'>歌手</div>
             <div :class="{active:getUrl=='/order'}"  @click='go("/order",true)'>个人中心</div>
        </div>
        <div class="right">
            <el-button type="text" style="color:#fff" @click='showLogin' v-if='!$store.state.user.id'>登录</el-button>
            <div v-else>
              <img v-if='$store.state.user.avatar' :src="$store.state.user.avatar" alt="" style="width: 50px;height: 50px;border-radius: 50%;margin-right: 10px;">
              {{$store.state.user.name}}

                  <el-button  type="text"  @click='logout' style="color:#fff;margin-left:20px">退出</el-button>
            </div>
        </div>

    </div>
    <el-dialog
  :title="loginType==1?'登录':'注册'"
  :visible="$store.state.dialogVisible"
  width="400px"
  :before-close="handleClose">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
  <el-form-item label="账号" prop="name">
    <el-input v-model="ruleForm.name" placeholder="请输入账号"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password" >
    <el-input v-model="ruleForm.password" type='password'  show-password placeholder="请输入密码"></el-input>
  </el-form-item>
  <el-form-item prop="phone" v-if="loginType==2" label="手机号" >
    <el-input placeholder="请输入手机号" v-model="ruleForm.phone"></el-input>
</el-form-item>
<el-form-item prop="sex"  v-if="loginType==2" label="性别" >
    <el-select v-model="ruleForm.sex" placeholder="请选择性别" style="width:100%">
        <el-option label="男" value="1"></el-option>
        <el-option label="女" value="2"></el-option>
    </el-select>
</el-form-item>
<el-form-item prop="avatar"  v-if="loginType==2" label="头像" >
    <el-upload
  class="avatar-uploader"
 action="/api/upload"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  >
  <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

</el-form-item>
  </el-form>
    <el-button type="text" @click="changeType(2)" v-if="loginType==1">去注册</el-button>
    <el-button type="text" @click="changeType(1)" v-else>去登录</el-button>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm">{{ loginType==1?'登 录':'注 册' }}</el-button>
  </span>
</el-dialog>
    </div>

</template>
<script>
    import api from "@/api/index"
    export default {
        data() {
            return {
                dialogVisible: false,
                loginType:1,
                ruleForm: {},
                
                rules: {
                    name: [{
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur'
                    }, ],
                    avatar: [{
                        required: true,
                        message: '请上传头像',
                        trigger: 'blur'
                    }, ],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }, ],
                    phone: [{
            required: true,
            validator: this.validatePass,
            trigger: 'change',
        }],
        sex: [{
            required: true,
            message: '性别不能为空',
            trigger: 'change',
        }],
                }
            }
        },
        computed: {
            getUrl() {
                console.log(this.$route);
                return this.$route.path
            }
        },
        methods: {
            handleAvatarSuccess(e){
                this.$set( this.ruleForm,'avatar',e.data)
            },
            validatePass (rule, value, callback)  {
        console.log(value);
        if (value === '') {
            callback(new Error('手机号不能为空'))
        } else {
            let reg = /^1[3-9]\d{9}$/
            if (reg.test(value)) {
                callback()

            }
            callback(new Error('手机号格式不正确'))
        }
    },
            changeType(t){
                this.loginType=t
                this.ruleForm={}
            },
            handleClose() {

                this.$store.commit("show", false)
            },
            showLogin() {
                this.$store.commit("show", true)
            },
            logout() {
                this.$store.commit("SET_USER", {})
                localStorage.removeItem("user")
                this.$message({
                    message: '退出成功',
                    type: 'success'
                });
                this.$router.push("/")
            },
            submitForm(formName) {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.ruleForm.type=1
                        if(this.loginType==1){
                        api.login(this.ruleForm).then(res => {
                            console.log(res, 1111);
                            if (res.code == 200) {
                                this.$store.commit("SET_USER", res.data)
                                localStorage.setItem('user', JSON.stringify(res.data))
                                this.$message({
                                    message: '登录成功',
                                    type: 'success'
                                });
                                this.$store.commit("show", false)
                            }
                        })
                        }else{
                        api.reg(this.ruleForm).then(res => {
                            console.log(res, 1111);
                            if (res.code == 200) {
                               this.changeType(1)
                                this.$message({
                                    message: '注册成功',
                                    type: 'success'
                                });
                            }
                        })
                        }
                       
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            go(e,b=false) {
                if(b&&!this.$store.state.user.id){
                  return     this.$store.commit("show", true)
                }
                console.log("object");
                this.$router.push(e)
            }
        },
    }
</script>

<style lang="scss" scoped>
 ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
    * {
        box-sizing: border-box;
    }
    
    .active {
        background-color: #9B0909;border-radius: 10px;
    }
    
    .header {
        width: 100%;
        height: 70px;
        border-bottom: 1px solid rgb(155, 155, 155);
        font-size: 18px;
        padding: 20px;
        color: white;
        background-color: rgb(194,12,12);
        display: flex;
        align-items: center;
        .center {
            >div {
               
                display: flex;
                justify-content: center;
                text-align: center;
            }
            flex-grow: 1;
        }
        .left {
            flex: 1;
            display: flex;
            line-height: 36px;
            >div:not(:nth-child(1)) {
                text-align: center;
                flex: 1;
                cursor: pointer;
                margin-right: 30px;
            }
        }
        .right {
            text-align: right;
            width: 300px;
        }
    }
</style>